<template>
  <div id="app">
    <common-header></common-header>
    <div class="container mt-5">
      <div class="alert alert-success text-center" v-if="calcShopCardNum('hasGoodNum')">
          当前购物车共有&nbsp;{{this.$store.getters.getShopCartGood.length}}&nbsp;件商品
      </div>
      <div class="alert alert-success text-center" v-else>
        当前购物车空空如也，可以去<router-link to='/'>商城首页</router-link>看看哦！
      </div>
      <table class="table table-hover table-responsive-sm" v-if="calcShopCardNum('hasGoodNum')">
        <thead>
          <tr>
            <th scope="col">商品名</th>
            <th scope="col">数量</th>
            <th scope="col">价格</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in calcShopCardNum()" :key="index">
            <td>
              <img
                height="100"
                :src="item.Pic"
              >{{item.D_title}}
            </td>
            <td>
              <div class="input-group input-group-sm" style="width:90px">
                <div class="input-group-prepend">
                  <span class="input-group-text" @click="changeShopCardGoodNum(item,'-')" style="cursor:pointer">-</span>
                </div>
                <input type="num" class="form-control text-center" :value="item.addShopCardNum" v-on:input="directInputGoodNum(item,index)" ref="goodNum" />
                <div class="input-group-prepend">
                  <span class="input-group-text" @click="changeShopCardGoodNum(item,'+')" style="cursor:pointer">+</span>
                </div>
              </div>
            </td>
            <td>{{item.Price*item.addShopCardNum | formatMoney}}</td>
            <td>
              <button class="btn btn-danger" @click="delGood(index)">删除</button>
            </td>
          </tr>
          <tr>
            <td colspan="2" align="left">
              <div>总价：{{calcShopCardGoodSum | formatMoney}}</div>
            </td>
            <td colspan="2"  align="right">
                <div class="btn-group-sm">
                  <router-link tag="button" class="btn btn-secondary" to="/">继续购物</router-link>
                  <button type="button" class="btn btn-primary" @click="$router.push('/confirmorderinfo')">点我结账</button>
                </div>
            </td>            	
          </tr>
        </tbody>
      </table>
    </div>
    <common-footer></common-footer>
  </div>
</template>


<script>
import commonHeader from "./common/header.vue";
import commonFooter from "./common/footer.vue";
export default {
  components: {
    commonHeader,
    commonFooter
  },
  data(){
    return {
      num:0
    }
  },
  filters:{
    formatMoney(value){
      return "¥ "+value.toFixed(2);
    }
  },
  computed:{
    calcShopCardNum(num){
      return function(num){
        if(num){
          if(this.$store.getters.getShopCartGood.length!=0) return true;
          else return false;
        }else{
          return this.$store.getters.getShopCartGood;
        } 
      }
    },
    calcShopCardGoodSum(){
      let goods=this.$store.getters.getShopCartGood;
      let sum=0;
      for(let item of goods){
          sum=sum+item.Price*item.addShopCardNum;
      }
      return sum;
    }  
  },
  methods:{
    changeShopCardGoodNum(good,type,hasNum=0){
      let changeGoodsNum=good;
      if(type=='+'){
        if(changeGoodsNum['addShopCardNum']+1 != 0){
            if(hasNum){
               changeGoodsNum['addShopCardNum']=hasNum;
            }else{
               changeGoodsNum['addShopCardNum']++;
            }
            
        }else{
            changeGoodsNum['addShopCardNum']=1;
        }
      }else{
        if(changeGoodsNum['addShopCardNum']-1 != 0){          
            changeGoodsNum['addShopCardNum']--;
        }else{
            changeGoodsNum['addShopCardNum']=1;
        }        
      }
      this.$store.commit('changeShopCardGoodNum',changeGoodsNum);
    },
    directInputGoodNum(good,index){
      let num=this.$refs.goodNum[index].value;
      if(!num<1 && num != 0){
        this.changeShopCardGoodNum(good,'+',num);
      }else{
        this.$refs.goodNum[index].value=1;
      }
    },
    delGood(index){
       this.$store.commit('delShopCardGood',index);
    }
  }
};
</script>

<style scoped>
.table td {
  vertical-align: middle;
}
</style>
